
<template>
	<view class="reg" :class="'reg'+isShow+isOk">
		<view class="title"
		@touchmove="touchIng" @touchend="touchOver"
		>
			<i class="iconfont "
			:class="'icon-shanghua'+(mode?'':'-copy')"
			@click="$emit('changeShow')"
			></i>
		</view>
		<view class="main" v-show="mainShow">
			<!-- 注册 -->
			<view class="input-view">
				<input type="text"
				:class="isShake"
				v-model="acc.uAccount" auto-blur
				placeholder="账号"
				>
				<hr>
				<input
				:class="isShake"
				type="password" 
				v-model="acc.uPassword"
				 auto-blur
				maxlength="13"
				placeholder="密码"
				>
				<hr>
				<input
				:class="isShake"
				type="password" 
				v-model="acc.uPassword_"
				auto-blur
				maxlength="13"
				placeholder="确认密码"
				>
			</view>
			<view class="btn_view">
				<u-button
				plain type="success"
				ripple ripple-bg-color="#ccdfd2"
				@click="toReg"
				>注册</u-button>
				<!-- <u-button plain ripple @click="changeShow">去注册</u-button> -->
			</view>
		</view>
	</view>
</template>

<script scoped>
export default{
	options:{
		addGlobalClass:true,
		styleIsolation: 'shared'
	},
	data(){
		return{
			acc:{
				uAccount:'',
				uPassword:'',
				uPassword_:''
			},
			isShake: '',
			isOk:'-ok',
			isShow:this.mode? '-hidden':'-show',
			mainShow:this.mode? false:true,
			touchList:[]
		}
	},
	props:['mode','addClass'],
	methods:{
		touchIng(event){
			// console.log(event)
			// console.log(event.touches[0].pageY)
			this.touchList.push(parseInt(event.touches[0].pageY))
			// event
		},
		touchOver(e){
			
			let data = this.touchList
			this.touchList = []
			if(data.length==0){
				return;
			}
			if(data.length<=5 || Math.abs(data[0]-data.slice(-1)[0])<50)
				{
					this.$emit("warning","滑动过短")
					return;
				}
			// console.log(data)
			let tag = data[0]
			let result = data.slice(1).map(a=>{
				let i = tag<a? 0:1
				tag = a
				return i
			}).reduce((a,b)=>a+b)
			console.log(data)
			// console.log(result,data.length-1)
			if(result == 0)
				{
					console.log("下滑")
					if(this.mode===false)
					this.$emit('changeShow')
				}
			else if(result == data.length-1)
				{
					console.log("上划")
					if(this.mode===true)
					this.$emit('changeShow')
				}
			
		},
		error(info){
			this.isShake = "shakeThe "
			setTimeout(()=>{
				this.isShake = ' '
			},400)
			this.$emit("warning",info)
			uni.hideLoading()
		},
		toReg(){
			uni.showLoading({
				mask: true
			})
			if(!/^\d{6,13}$/.test(this.acc.uAccount)
			   ||
			   !/^.{6,13}$/.test(this.acc.uPassword)
			   ||
			   !/^.{6,13}$/.test(this.acc.uPassword_)
			  )
			{
				this.error("账号/密码不规范")
				return;
			}
			if(this.acc.uPassword != this.acc.uPassword_)
			{
				this.error("两次密码不一致")
				this.acc.uPassword = ''
				this.acc.uPassword_ = ''
				return;
			}
			this.kRequest('post','./api/doReg',{
				data:this.acc
			}).then(e=>{
				uni.hideLoading()
				this.$emit("success",e.data[0].info)
				this.$emit("changeShow")
				this.acc = {
					uAccount:'',
					uPassword:'',
					uPassword_:''
				}
			}).catch(e=>{
				this.error(e.data[0].info)
			})
			
		}
	},
	watch:{
		mode(){
			console.log("mode改变")
			this.isOk = ''
			setTimeout(()=>{
				this.mainShow = !this.mainShow
			},400)
			this.isShow = this.mode? '-hidden':'-show'
			setTimeout(()=>{
				this.isOk = '-ok'
			},1100)
		}
	}
}
</script>

<style lang="scss" scoped>
.input-placeholder{
	color: #f3f3f3;
}
.iconfont{
	zoom: 1.5;
}
.title{
	padding-top: 30rpx;
	font-size:40rpx;
	font-weight: 700;
	text-align: center;
	color: white;
}
.reg{
	position: absolute;
	top: 0;bottom: 0;left: 0;right: 0;
	background: #1ace71;
	&-show{
		animation: regShow 1s linear forwards;
	}
	&-hidden{
		animation: regShow 1s reverse linear forwards;
	}
	&-show-ok{
		// transform: translate(0%,10%);
		top: 10%;
		clip-path: ellipse(140% 100% at 50% 100%);
	}
	&-hidden-ok{
		// transform: translate(0%,80%);
		top: 90%;
		clip-path: ellipse(55% 100% at 50% 100%);
	}
	.main{
		height:33vh;
		width: 400rpx;
		position: absolute;
		top: 20%;left: 50%;
		transform: translate(-50%,0%);
		box-sizing: border-box;
		.input-view{
			position: relative;
			height:auto;
			border: 2px solid #fff;
			hr{
				height: 2px;
				background: #fff;
				border: none;
			}
			border-radius: 20rpx;
			input{
				padding-left: 5px;
				height: 6vh;
			}
		}
		.btn_view{
			margin-top: 20px;
		}
	}
}
@keyframes regShow{
	0% {
		// transform: translate(0%,90%);
		top: 90%;
		clip-path: ellipse(55% 100% at 50% 100%);
	}
	60%{
		top:50%;
		clip-path: ellipse(70% 100% at 50% 100%);
	}
	100% {
		// transform: translate(0%,10%);
		top: 10%;
		clip-path: ellipse(140% 100% at 50% 100%);
		
	}
}
</style>
